<template>
  <div class="pageContacts">
    <!-- 返回按钮 -->
    <div class="goBackButtonBox">
      <div @click="handleClosed" class="item cursor-pointer el-icon-arrow-left font24"></div>
    </div>

    <!-- 字典列表 -->
    <div class="dictList">
      <el-table :data="dictList" style="width: 100%">
        <!-- 字典代码 -->
        <el-table-column prop="code" label="字典代码" show-overflow-tooltip></el-table-column>
        <!-- 字典值 -->
        <el-table-column prop="value" label="字典值" show-overflow-tooltip></el-table-column>
        <!-- 备注 -->
        <el-table-column prop="notes" label="备注" show-overflow-tooltip></el-table-column>
        <!-- 状态 -->
        <el-table-column label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :closable="false" :disable-transitions="false" :type="scope.row.status == 1 ? 'success' : 'danger'">
              {{ scope.row.status == 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <!-- <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <!-- 新增/修改弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="80%">
      <el-form :model="form" :rules="rules" ref="dictForm" label-width="100px">
        <el-form-item label="字典代码" prop="code">
          <el-input v-model="form.code" placeholder="请输入字典代码" :maxlength="20" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="字典值" prop="value">
          <el-input
            v-model="form.value"
            placeholder="请输入字典值"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 6 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="notes">
          <el-input
            v-model="form.notes"
            placeholder="请输入备注"
            type="textarea"
            :maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </el-dialog>

    <!-- 新增字典按钮 -->
    <el-button type="primary" @click="handleAdd" style="margin: 20px 0;">新增字典</el-button>
  </div>
</template>

<script>
import { getWithPagination, updateDict, addDict } from "@/api/dict";

export default {
  data() {
    return {
      dictList: [], // 字典列表数据
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页显示的记录数
      total: 0, // 总记录数
      dialogVisible: false, // 弹窗是否显示
      dialogTitle: "新增字典", // 弹窗标题
      form: { // 表单数据
        id: null,
        code: "",
        value: "",
        notes: "",
        status: 1 // 默认状态为启用
      },
      rules: { // 表单验证规则
        code: [
          { required: true, message: "字典代码不能为空", trigger: "blur" }
        ],
        value: [
          { required: true, message: "字典值不能为空", trigger: "blur" }
        ],
        notes: [
          { required: true, message: "备注不能为空", trigger: "blur" }
        ],
        status: [
          { required: true, message: "状态不能为空", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 返回按钮点击事件
    handleClosed() {
      this.$router.go(-1); // 返回上一页
    },
    // 获取字典列表
    async getDictList() {
      try {
        const res = await getWithPagination({
          page: this.currentPage,
          pageSize: this.pageSize
        });
        if (res.code === 200) {
          this.dictList = res.data.list;
          this.total = res.data.total;
        } else {
          this.$message.error(res.message);
        }
      } catch (err) {
        this.$message.error("获取字典列表失败");
      }
    },
    // 编辑按钮点击事件
    handleEdit(row) {
      this.dialogTitle = "修改字典";
      this.form = { ...row }; // 将当前行的数据复制到表单
      this.dialogVisible = true;
    },
    // 分页组件的每页显示条数改变事件
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.getDictList();
    },
    // 分页组件的当前页码改变事件
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
      this.getDictList();
    },
    // 新增字典按钮点击事件
    handleAdd() {
      this.dialogTitle = "新增字典";
      this.form = {
        id: null,
        code: "",
        value: "",
        notes: "",
        status: 1 // 默认状态为启用
      }; // 重置表单
      this.dialogVisible = true;
    },
    // 新增/修改提交事件
    handleSubmit() {
      this.$refs.dictForm.validate(async (valid) => {
        if (valid) {
          try {
            if (this.dialogTitle === "新增字典") {
              // 调用新增接口
              const res = await addDict(this.form);
              if (res.code === 200) {
                this.$message.success("新增成功");
                this.dialogVisible = false;
                this.getDictList(); // 刷新列表
              } else {
                this.$message.error(res.message);
              }
            } else {
              // 调用修改接口
              const res = await updateDict(this.form);
              if (res.code === 200) {
                this.$message.success("修改成功");
                this.dialogVisible = false;
                this.getDictList(); // 刷新列表
              } else {
                this.$message.error(res.message);
              }
            }
          } catch (err) {
            this.$message.error("操作失败");
          }
        } else {
          this.$message.error("表单信息填写有误");
        }
      });
    }
  },
  mounted() {
    this.getDictList(); // 页面加载时获取字典列表
  }
};
</script>

<style scoped>
.pageContacts {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}

.goBackButtonBox {
  font-size: 24px;
  font-weight: 500;
  display: inline-block;
  position: fixed;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0 20px;
  z-index: 22;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: left;
  background-color: #fff;
}

.goBackButtonBox .item {
  width: 50px;
}

.dictList {
  margin-top: 50px;
}

/* 适配移动端样式 */
@media (max-width: 768px) {
  .dictList {
    padding: 10px;
    margin-top: 50px;
  }

  .el-table {
    font-size: 14px;
  }

  .el-pagination {
    font-size: 12px;
  }

  .el-dialog {
    width: 90% !important;
  }

  .el-form-item__content {
    font-size: 14px;
  }
}
</style>